<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
        <style type="text/css">
            html {
                border: 1px solid green;
                margin: 17px;
            }
            body {
                border: 1px solid green;
                margin: 17px;
            }

            .wrapper,
            .wrapper>* {
                border: 1px solid blue;
            }

            .wrapper {
                width: 400px;
                height: 200px;
            }

            .inner {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 100px;
                height: 50px;
                border-color: red;
                background: rgba(100, 100, 100, 0.5);
            }
        </style>
    </head>
    <body>

        <h3>绝对定位</h3>
        <p>当元素的定位方式为`absolute`时即为绝对定位</p>
        <p>其一：元素相对于浏览器窗口的边界进行定位</p>

        <div class="wrapper">
            <b>我是老大</b>
            <div class="inner">我是老二</div>
            <span>我是小三</span>
        </div>


    </body>
</html>